<template id="analyse-content">
  <div class="container">
    <div class="graph">
      <item-wrap title="全局负载感知">
        <Graph :data="data" />
      </item-wrap>
    </div>
    <div class="switch">
      <item-wrap title="策略自治">
        <Switch :data="data" />
      </item-wrap>
    </div>
  </div>
  <router-view />
</template>

<script>
import Graph from "@/components/echarts/topology/AnalyseTopology.vue";
import Switch from "@/components/echarts/topology/Switch.vue";
import axios from "axios";
import { loadConfig } from "@/utils/config";

export default {
  name: "Home",
  components: {
    Graph,
    Switch,
  },
  data() {
    return {
      data: null,
      interval: null,
    };
  },
  mounted() {
    this.fetchData();
    this.interval = setInterval(this.fetchData, 2000); // 每5秒刷新一次数据
  },
  beforeUnmount() {
    clearInterval(this.interval);
  },
  methods: {
    async fetchData() {
      const config = await loadConfig();
      const apiUrl = config.apiUrl;
      axios
        .get(`${apiUrl}/getDB?table=analytics_data`)
        .then((response) => {
          if (response.data && response.data.length > 0) {
            this.data = response.data[response.data.length-1];
            this.data.origin_path = (this.data.origin_path || "1,2").split(',');
            this.data.strategy_path = (this.data.strategy_path || "1,2").split(',');
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  height: 80%;
  width: 100%;
  justify-content: center;
  font-size: 30px;
  margin-top: 20px;
}
.graph {
  width: 100%;
}
.switch {
  width: 100%;
  height: 100%;
}
</style>
